<!-- eslint-disable vue/no-v-model-argument -->
<template>
  <div class="project-one">
    <div class="query">
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item label="项目名称">
          <el-input
            v-model="queryForm.project_name"
            clearable
            placeholder="请输入项目名称"
          />
        </el-form-item>
        <el-form-item label="启动时间">
          <el-date-picker
            v-model="queryForm.start_time"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
            type="date"
            placeholder="请选择启动时间"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onQuery">查询</el-button>
          <el-button type="info" @click="reset">重置</el-button>
          <el-button type="primary" @click="onAdd">新增项目</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="No" />
        <el-table-column prop="proName" label="项目名称" />
        <el-table-column prop="rankName" label="负责人" />
        <el-table-column prop="createTime" label="项目启动日期" />
        <el-table-column prop="pid" label="当前人数" />
        <el-table-column prop="program_cycle" label="项目周期" />
        <el-table-column prop="program_status" label="项目状态" width="200">
          <template #default="{ row }">
            <el-progress
              :percentage="row.program_status"
              :color="customColors"
              :stroke-width="10"
            />
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="140">
          <template #default="{ row }">
            <el-button link type="primary" size="small">查看</el-button>
            <el-button
              link
              type="primary"
              size="small"
              @click="onProgramConfig(row)"
              >配置</el-button
            >
            <el-button link type="primary" size="small" @click="deleteRow(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="page-helper">
        <el-pagination
          v-model:current-page="pageInfo.pageNum"
          v-model:page-size="pageInfo.pageSize"
          :page-sizes="[20, 200, 300, 400]"
          :disabled="false"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <AddProgram ref="addProgramRef" @onSubmit="onSubmit" />
  </div>
</template>

<script>
/* eslint-disable */
import { reactive, onMounted, ref } from "vue";
import { random } from "loadsh";
import { cloneDeep } from "lodash";
import { AddProgram } from "./comps";
import { useRouter } from "vue-router";
import { Add ,Del} from "../api/one.js";
import AppVue from "@/App.vue";
export default {
  components: {
    AddProgram,
  },
  setup() {
    Add().then((res) => {
      const AddData = res.data.data;
      tableData.value = AddData;
      console.log(AddData);
    });
    const queryForm = reactive({
      project_name: "",
      start_time: "",
    });

    const pageInfo = reactive({
      pageSize: 20,
      pageNum: 1,
      total: 400,
    });
    const router = useRouter();
    const cacheTableData = ref([]);
    const tableData = ref([]);
    const addProgramRef = ref(null);
    const customColors = [
      { color: "#f56c6c", percentage: 10 },
      { color: "#e6a23c", percentage: 60 },
      { color: "#5cb87a", percentage: 100 },
    ];
    // onMounted(() => {
    //   for (let index = 0; index < 15; index++) {
    //     tableData.value.push({
    //       no: `1000${random(1000, 9999)}`,
    //       name: `1000${random(1000, 9999)}-项目`,
    //       people: '张学友',
    //       date: `2022-11-${random(10, 30)}`,
    //       prople_num: random(10, 99),
    //       program_cycle: random(1, 9),
    //       program_status: random(1, 100)
    //     })
    //     cacheTableData.value = cloneDeep(tableData.value)
    //   }
    // })

    const onQuery = () => {
      const result = Object.keys(queryForm).every((key) => !queryForm[key]);
      console.log(queryForm);
      if (result) {
        tableData.value = cloneDeep(cacheTableData.value);
        return;
      }
      tableData.value = cacheTableData.value.filter(
        (item) =>
          item.name.includes(queryForm.project_name) &&
          item.date === queryForm.start_time
      );
    };
    const reset = () => {
      Object.keys(queryForm).forEach((key) => {
        queryForm[key] = "";
      });
      onQuery();
    };

    const deleteRow = (row) => {
      tableData.value = tableData.value.filter((item) => item.no !== row.no);
      const dataDel = {
        dictId: row.dictId,
      }; //   console.log(dataDel);
      Del(dataDel)
        .then((res) => {
          Dict(dictInput)
            .then((res) => {
              tableData = res.data.data; 
              console.log(Dictdata);
            })
            .catch((error) => {});
        })
        .catch((error) => {});
    };

    const onAdd = () => {
      addProgramRef.value.modelShow = true;
    };

    const onSubmit = (value) => {
      tableData.value.unshift(value);
    };

    const handleSizeChange = (e) => {
      console.log(e);
    };
    const handleCurrentChange = (e) => {
      console.log(e);
    };

    const onProgramConfig = (row) => {
      router.push({
        name: "program-config",
        query: {
          no: row.no,
        },
      });
    };

    return {
      queryForm,
      tableData,
      customColors,
      onQuery,
      reset,
      deleteRow,
      addProgramRef,
      onAdd,
      onSubmit,
      pageInfo,
      handleCurrentChange,
      handleSizeChange,
      onProgramConfig,
      router,
    };
  },
};
</script>

<style lang="less" scoped>
.page-helper {
  display: flex;
  justify-content: flex-end;
  height: 50px;
  align-items: center;
}

.query {
  padding: 20px;
  background-color: #fff;
  margin-bottom: 20px;
}

.table {
  padding: 20px;
  background-color: #fff;
}
</style>
